<template>
  <el-form
    :model="dataForm"
    :rules="dataRule"
    ref="dataForm"
    @keyup.enter.native="dataFormSubmit()"
    label-width="150px"
  >
    <el-form-item label="banner">
      <el-upload
        class="avatar-uploader"
        :action="url"
        :show-file-list="false"
        :on-success="handleUploadImageOK"
        :before-upload="checkSame"
        accept="image/jpg,image/jpeg,image/png">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div slot="tip" class="el-upload__tip">请上传1125宽度的图片，小于250KB</div>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="dataFormSubmit">确定</el-button>
      <el-button @click="init">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<style>

</style>
<script>
  export default {
    data() {
      return {
        isAdd: true,
        id: '',
        url: '',
        dialogVisible: false,
        dialogImageUrls: '',
        imageUrl: '',
        dataForm: {
          imageUrl: '',
        },
        dataRule: {
          amount: [
            {required: true, message: '订单金额不能为空', trigger: 'blur'}
          ],
        },
      }
    },
    mounted() {
      this.url = this.$http.adornUrl(
        `/operate/bugPageInfo/upload?token=${this.$cookie.get('token')}`
      )
      this.init()
    },
    methods: {
      init() {
        this.$http({
          url: this.$http.adornUrl(
            `/college/collegebanner/info`
          ),
          method: 'get',
          params: this.$http.adornParams({bannerType: 1})
        }).then(({data}) => {
          if (data && data.code === 0) {
            if(data.collegeBanner&&data.collegeBanner.id) {
              this.imageUrl = data.collegeBanner.bannerUrl
              this.id = data.collegeBanner.id
            }
          }
        })
      },
      handleUploadImageOK(res, file, fileList) {
        if(res && res.code === 0) {
          this.imageUrl = res.url
        } else {
          this.$message.error(data.msg)
        }
      },
      checkSame(file) {
        const is250K = file.size / 1024 < 250
        if (!is250K) {
          this.$message.error('上传的图片要小于250KB!')
        }
        const isSize = new Promise(function(resolve, reject) {
          let width = 1125
          let _URL = window.URL || window.webkitURL
          let img = new Image()
          img.onload = function() {
            let valid = img.width == width
            valid ? resolve() : reject()
          }
          img.src = _URL.createObjectURL(file)
        }).then(
          () => {
            return file
          },
          () => {
            this.$message.error('上传的图片宽度必须是1125!')
            return reject()
          }
        )
        return is250K && isSize
      },
      // 表单提交
      dataFormSubmit() {
        if(this.imageUrl) {
          this.$http({
            url: this.$http.adornUrl(
              `/college/collegebanner/${this.id?'update':'save'}`
            ),
            method: 'post',
            data: this.$http.adornData({bannerUrl: this.imageUrl, bannerType : 1, id: this.id})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500
              });
              this.init()
            } else {
              this.$message.error(data.msg)
            }
          });
        } else {
          this.$message.error('请前上传图片')
        }
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
